<template>
  <div class="settings-item">
    <div class="header">
      <div class="title">
        语音播放
        <Tooltip
          transfer
          theme="light"
          placement="bottom"
          max-width="400"
          content="提示"
        >
          <Icon type="ios-help-circle-outline" />
        </Tooltip>
      </div>
      <div class="actions">
        <text-button type="normal" @click="visible=true">{{form.voicemodel ? '开启' : '关闭'}}</text-button>
      </div>
    </div>
    <div class="content"></div>
  </div>
  <CommonDialog
    title="语音播放"
    v-model="visible"
    :confirmLoading="loading"
    width="500px"
  >
    <Form label-position="left" :label-width="120">
      <FormItem label="语音模型" >
        <Select v-model="form.voicemodel">
          <Option
            v-for="item in modelList"
            :value="item.id"
            :key="item.id"
            >{{ item.name }}</Option
          >
        </Select>
      </FormItem>
      <FormItem label="语速" prop="speed">
        <Slider :marks="marks" v-model="form.speed" :min="0.3" :max="2" :step="0.1"></Slider>
      </FormItem>
    </Form>
    <template #footer>
      <Button @click="visible = false">取消</Button>
      <Button type="primary" @click="submit">确认</Button>
    </template>
  </CommonDialog>
</template>
<script setup>
import { ref } from 'vue';
import CommonDialog from '@/components/CommonDialog/index.vue';

const props = defineProps({
  form: {
    type: Object,
    default: () => {}
  },
  modelList: {
    type: Array,
     default: () => []
  }
})
// 弹窗显示
const visible = ref(false);
const loading = ref(false);

const marks = ref({
  0.3: '0.3',
  2: '2',
})

const submit = () => {
  visible.value = false;
};
</script>
